{% extends "scrum/base.html" %}
{%load static%}

{% block title %}项目检索{% endblock %}

{% block content %}

<h1>项目检索</h1>

<div class="row">

  <div class="mb-3 col-md-4" style="margin-top: 20px;">
    <label for="exampleFormControlInput1" class="form-label">项目名称关键字:</label>
    <input type="text" class="form-control" id="keyWord" placeholder="项目名称关键字">
  </div>

  

</div>

<div class="row">

  <div class="col-md-4">
    <div>项目类型选择：</div>
    <select class="form-select" aria-label="Default select example" id="product_type_id">
      <option value=0 selected>所有类型</option>
      <option value=5>行政</option>
      <option value=2>生产</option>
      <option value=3>采购</option>
      <option value=4>科技服务</option>
      <option value=1>研发</option>
    </select>

  </div>

  <div class="col-md-4">

  <div>项目状态选择：</div>
  <select class="form-select" aria-label="multiple select example" id="operation">
    <option value="all" selected>所有状态</option>
    <option value="0">撤销</option>
    <option value="1">等待</option>
    <option value="2">进行中</option>
    <option value="3">完成</option>
  </select>

  </div>


  <div class="col-md-4">

    <div>项目负责人：</div>

    <select class="form-select" aria-label="multiple select example" id="master_id">

      <option value=0 selected>所有人</option>

      {% for user in all_user%}

      <option value={{user.id}}>{{user.username}}</option>

      {% endfor %}

    </select>

  </div>



</div>


<div class="but">
  <button type="button" class="btn btn-primary" onclick="loadProduct()">查询项目</button>
</div>


<!-- <button type="button" class="btn btn-primary" onclick="loadProduct()">查询项目</button> -->



<table class="table table-hover text-nowrap align-middle">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">项目</th>
      <th scope="col">项目代码</th>
      <th scope="col">负责人</th>
      <th scope="col">开始时间</th>
      <th scope="col">预计完结时间</th>
      <th scope="col">状态</th>
    </tr>
  </thead>
  <tbody id="div1">
    <!-- {% for product in all_product%}
    <tr onclick="showProductBacklogs({{product.id}})"  title="{{product.goal}}">
      <th scope="row">{{product.id}}</th>
      <td>{{product.product}}</td>
      <td>{{product.product_code}}</td>
      <td>{{product.master}}</td>
      <td>{{product.start_date}}</td>
      <td>{{product.end_date}}</td>
      <td>

        {% if product.operation == 0 %}

        撤销

        {% elif product.operation == 1 %}

        等待
        
        {% elif product.operation == 2 %}
        
        进行中
        

        {% elif product.operation == 3 %}
        
        完成
        {% endif %}


      </td>

    </tr>
    {% endfor %} -->
  </tbody>
</table>



{% endblock %}


{% block script %}    

<script>


function showProductBacklogs(product_id){

  // console.log(product_id)

  window.location.href="../product_backlogs?product_id=" + product_id
  
};

function loadProduct(){
  var keyword = $("#keyWord").val();
  var product_type_id = $("#product_type_id").val();
  var operation = $("#operation").val();
  var master_id = $("#master_id").val();

  console.log(keyword)
  console.log(product_type_id)
  console.log(operation)
  console.log(master_id)

  var url = '/product_table/?keyword='+keyword+'&product_type_id='+product_type_id+'&operation='+operation+'&master_id='+master_id

  $("#div1").load(url)

}
</script>

<style>
  .but {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: right;
  }
</style>
{% endblock %}


